<!DOCTYPE html>
<html>
  <head>
    <title>firstAjax.html</title>
	
<!--     <meta name="keywords" content="keyword1,keyword2,keyword3"> -->
<!--     <meta name="description" content="this is my page"> -->
<!--     <meta name="content-type" content="text/html; charset=UTF-8"> -->
    <meta charset="UTF-8">
  </head>
  
  <body>
  
  		<div id="msg"></div>
  		<input type="button" value="发送" id="sendMsg"/>
  </body>
  
  <script type="text/javascript">
  		window.onload = function(){
  		
  				var xmlHttpRequest = null;
  				// 监听发送的按钮
  				document.getElementById("sendMsg").addEventListener("click", function(e) {
  					
  					create(); // 创建Ajax关键对象
  					xmlHttpRequest.open("post", "echoServlet");
  					xmlHttpRequest.send(null);
  					// 添加监听回调函数
  					xmlHttpRequest.onreadystatechange = function(){
  						
  						// 判断是否正确接收
  						if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
  								// 正确接收，那么现实在Div中
  								var msg = xmlHttpRequest.responseText;
  								document.getElementById("msg").textContent = msg;
  						}
  					}
  				}, false);
  				
  				function create(){
  					if(window.XMLHttpRequest) {
							// 说明是非IE浏览器
							xmlHttpRequest = new XMLHttpRequest();  					
  					}else{
  							xmlHttpRequest = new ActiveXObject("Microsoft.XMLHttp");
  					}
  				}
  		}
  </script>
  
</html>
